<template>
	<view class="container">
		<u-navbar title="投诉客服" :border-bottom="false" :background="{background:'#F5F5F5'}"></u-navbar>
		<view class="container_main">
			<u-input type="textarea" placeholder="请输入投诉内容" background-color="#fff" height="300" maxlength="200"
				v-model="data.value" :custom-style="{padding:'20rpx'}" ></u-input>
			<view class="container_main_txt">
				<text>{{data.currentWordNumber}}</text>/200
			</view>
		</view>

		<u-bottom-button confirmText="保存" @confirm="$u.throttle(submit, 1000)"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		watch
	} from "vue";
	const data = reactive({
		value: '',
		currentWordNumber:0,
		id: ''
	})
	onLoad(({
		id
	}) => {
		data.id = id
	})
	watch(() => data.value, (n) => {
		if (n.length >= 200) {
			data.value = data.value.substr(0, 200)
			data.currentWordNumber = 200
		} else {
			data.currentWordNumber = n.length
		}
	}, {
		deep: true
	})
	// 保存
	const submit = async () => {
		if (uni.$u.test.isEmpty(data.value)) return uni.$u.toast('请输入投诉内容')
		let params = {
			content: data.value,
			cs_id: data.id
		}
		let res = await uni.$u.api.customerServiceComplaint(params)
		uni.$u.toast('投诉成功')
		setTimeout(() => {
			uni.$u.route({
				type: 'back'
			})
		}, 500)
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.container {
		&_main {
			margin: 32rpx;
			background-color: #fff;

			&_txt {
				font-size: 28rpx;
				text-align: right;
				padding: 20rpx;

				text {
					color: #00d075;
				}
			}
		}
	}
</style>